<%--
  orders.jsp
  作用：用户"我的订单"页面，使用选项卡方式展示用户作为买家（我发送的订单）和卖家（我接收的订单）的所有订单。
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的订单</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/layout.css">
</head>
<body>

<div class="main-container">
    <jsp:include page="/WEB-INF/parts/sidebar.jsp" />

    <main class="content-area">
        <jsp:include page="/WEB-INF/parts/header.jsp" />

        <div class="page-title">
            <h2>我的订单</h2>
        </div>

        <c:if test="${not empty message}">
            <p class="success-message">${message}</p>
        </c:if>

        <div class="tab-container">
            <div class="tab-nav">
                <button class="tab-btn active" data-tab="received">我接收的订单</button>
                <button class="tab-btn" data-tab="sent">我发送的订单</button>
            </div>

            <div id="received" class="tab-content active">
                <c:if test="${empty receivedOrders}"><p class="empty-message">您现在没有接收到任何订单哦。</p></c:if>
                <c:forEach var="order" items="${receivedOrders}">
                    <div class="order-card">
                        <img src="${pageContext.request.contextPath}/uploads/product_images/${order.product.imageUrl}" alt="商品图片" class="order-img">
                        <div class="order-details">
                            <h4>${order.product.name}</h4>
                            <p>买家: ${order.buyer.username}</p>
                            <p>联系电话: ${order.buyer.phone}</p>
                            <p>状态: <span class="status-${order.status}">${order.status}</span></p>
                        </div>
                        <div class="order-actions">
                            <c:if test="${order.status == 'pending'}">
                                <a href="${pageContext.request.contextPath}/user/updateOrderStatus?id=${order.id}&status=completed" class="btn">完成订单</a>
                            </c:if>
                        </div>
                    </div>
                </c:forEach>
            </div>

            <div id="sent" class="tab-content">
                 <c:if test="${empty sentOrders}"><p class="empty-message">您现在没有发送任何订单哦。</p></c:if>
                 <c:forEach var="order" items="${sentOrders}">
                    <div class="order-card">
                        <img src="${pageContext.request.contextPath}/uploads/product_images/${order.product.imageUrl}" alt="商品图片" class="order-img">
                        <div class="order-details">
                            <h4>${order.product.name}</h4>
                            <p>卖家: ${order.seller.username}</p>
                            <p>联系电话: ${order.seller.phone}</p>
                            <p>状态: <span class="status-${order.status}">${order.status}</span></p>
                        </div>
                        <div class="order-actions">
                            <c:if test="${order.status == 'pending'}">
                                <a href="${pageContext.request.contextPath}/user/updateOrderStatus?id=${order.id}&status=cancelled" class="btn btn-danger">取消订单</a>
                            </c:if>
                            <c:if test="${order.status == 'completed'}">
                                <c:choose>
                                    <c:when test="${order.rated}">
                                        <span class="status-completed">已评价</span>
                                    </c:when>
                                    <c:otherwise>
                                        <button class="btn" onclick="openRatingModal('${order.id}', '${order.seller.id}')">评价</button>
                                    </c:otherwise>
                                </c:choose>
                            </c:if>
                             <a href="${pageContext.request.contextPath}/product?id=${order.product.id}" class="btn-detail">查看详情</a>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>
    </main>
</div>

<%-- 评价模态框 --%>
<div id="ratingModal" class="modal">
    <div class="modal-content">
        <span class="close-button" onclick="closeRatingModal()">&times;</span>
        <h3>评价交易</h3>
        <form action="${pageContext.request.contextPath}/user/submitRating" method="post">
            <input type="hidden" id="modalOrderId" name="orderId">
            <input type="hidden" id="modalRatedUserId" name="ratedUserId">
            <div class="form-group">
                <label for="score">评分:</label>
                <select id="score" name="score" class="form-control" required>
                    <option value="">请选择评分</option>
                    <option value="5">5 星 - 非常满意</option>
                    <option value="4">4 星 - 满意</option>
                    <option value="3">3 星 - 一般</option>
                    <option value="2">2 星 - 不满意</option>
                    <option value="1">1 星 - 非常不满意</option>
                </select>
            </div>
            <div class="form-group">
                <label for="comment">评论:</label>
                <textarea id="comment" name="comment" class="form-control" rows="5" placeholder="输入您的评论 (可选)"></textarea>
            </div>
            <button type="submit" class="btn">提交评价</button>
        </form>
    </div>
</div>

<script>
    function showTab(tabName) {
        document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
        document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
        document.getElementById(tabName).classList.add('active');
        document.querySelector('.tab-btn[data-tab="' + tabName + '"]').classList.add('active');
    }

    document.addEventListener("DOMContentLoaded", function() {
        document.querySelectorAll('.tab-btn').forEach(button => {
            button.addEventListener('click', function() {
                showTab(this.dataset.tab);
            });
        });

        const urlParams = new URLSearchParams(window.location.search);
        const tabFromUrl = urlParams.get('tab');
        if (tabFromUrl) {
            showTab(tabFromUrl);
        } else {
            showTab('received'); // 默认显示接收的订单
        }

        // 检查URL中是否有特定的锚点，如果有，尝试激活相应的tab
        const hash = window.location.hash.substring(1);
        if (hash) {
            const tabButton = document.querySelector('.tab-btn[data-tab="' + hash + '"]');
            if (tabButton) {
                tabButton.click();
            }
        }
    });

    function openRatingModal(orderId, ratedUserId) {
        document.getElementById('modalOrderId').value = orderId;
        document.getElementById('modalRatedUserId').value = ratedUserId;
        document.getElementById('ratingModal').style.display = 'block';
    }

    function closeRatingModal() {
        document.getElementById('ratingModal').style.display = 'none';
        // 清空表单，以便下次打开时是干净的
        document.getElementById('score').value = '';
        document.getElementById('comment').value = '';
    }

    // 点击模态框外部关闭
    window.onclick = function(event) {
        var modal = document.getElementById('ratingModal');
        if (event.target == modal) {
            closeRatingModal();
        }
    }
</script>
</body>
</html> 